<!-- 「活动简介」弹窗 -->
<template>
  <!-- 提示弹窗 -->
  <uni-popup
    ref="popup"
    :mask-click="false"
  >
    <div class="container">
      <image
        class="container-bg"
        :src="IMG_URL.POPUP_BG"
        mode="aspectFill"
      />
      <image
        class="title"
        :src="IMG_URL.ACTIVITY_INTRODUCTION"
        mode="aspectFit"
      />
      <div class="content">
        <p class="content-p">
          1.第四届嗨喵十月巅峰赛盛大开启：iPhone16手机等豪礼，让活动更精彩！
        </p>
        <!-- <image
          class="content-img"
          :src="IMG_URL.ACTIVITY_INTRODUCTION_IMG"
          mode="widthFix"
        /> -->
        <div class="content-img-list">
          <image class="content-img" :src="imgPath" v-for="(imgPath, index) in IMGLIST" :key="index"/>
        </div>
        <p class="content-p">
          2.活动说明：本活动包含“个人巅峰赛”和“团队邀请赛”两个板块，老师可同时参与两个比赛赢取活动奖励，具体可查看
          <span
            class="red"
            @click="emit('clickRule')"
          >活动规则。</span>
        </p>
        <p class="content-p">
          3.本次“个人巅峰赛”活动时间：2024年9月27日18点 - 10月7日24点，“团队邀请赛”活动时间：2024年9月27日18点-10月31日24点，请知悉。
        </p>
      </div>
      <div
        class="i-know"
        @click="close"
      >
        我知道了
      </div>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { IMG_URL } from '@/static/constant/activity-202405-constant';

const IMGLIST = [
  'https://ustatic.hudongmiao.com/miao/activity/wayuanee.png',
  'https://ustatic.hudongmiao.com/miao/activity/16pro.png',
  'https://ustatic.hudongmiao.com/miao/love/iwatchd.png',
  'https://ustatic.hudongmiao.com/miao/web/dajiang.png',
  'https://ustatic.hudongmiao.com/miao/activity/hmalou.png',
  'https://ustatic.hudongmiao.com/miao/activity/syb.png',
]

const popup = ref<UniHelper.UniPopupInstance>();

/** 弹窗打开 */
const open = () => {
  if (!popup.value?.open) return;
  popup.value?.open();
};

/** 弹窗关闭 */
const close = () => {
  if (!popup.value?.close) return;
  popup.value?.close();
  emit('popupClose');
};

defineExpose({
  open,
  close,
});

const emit = defineEmits<{(event: 'clickRule'): void,
  (event: 'popupClose'): void
}>();

</script>

<style scoped lang="scss">
.container {
  position: relative;

  width: min(92.2667vw, 346px);
  overflow: hidden;

  border-radius: 16px;

  padding: 22px 16px 24px;
  display: grid;
  grid-template:
    'title' max-content
    'content' max-content
    'i-know' max-content
    / 1fr;
  row-gap: 15px;

  .container-bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    width: 100%;
    height: 100%;
  }

  .title{
    grid-area: title;
    margin-bottom: 10px;

    width: 100%;
    height: 21px;
  }

  .content {
    grid-area: content;

    width: 100%;

    display: flex;
    flex-direction: column;
    row-gap: 16px;
    align-items: center;

    .content-img{
      width: 98%;
    }
    .content-img-list {
      display: grid;
      grid-template-columns: repeat(3, auto);
      grid-template-rows: repeat(2, auto);
      column-gap: 42rpx;
      row-gap: 31rpx;
      .content-img {
        width: 160rpx;
        height: 160rpx;
      }
    }

    .content-p{
      width: 100%;

      font-size: 14px;
      color: #513B25;

      .red{
        color:#FF403C;
        text-decoration-line: underline;
      }
    }
  }

  .i-know{
    grid-area: i-know;
    justify-self: center;

    width: 240px;
    height: 36px;

    background: $button-bg;
    border-radius: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    color: #fff;
  }
}
</style>

<!-- 规则内容样式 -->
<style lang="scss">
.rich-h1 {
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

.rich-p,.rich-ol {
  margin-top: 5px;

  padding: 0 0 0 20px;

  font-size: 15px;
  line-height: 28px;
  color: #333;

  .rich-li {
    margin: 5px 0;
  }
}

.rich-table {
  margin-top: 5px;

  border-collapse: collapse;

  border: 1px solid #333;

  font-size: 13px;
  color: #333;

  .rich-tr {
    border: 1px solid #333;

    .rich-td {
      border: 1px solid #333;

      padding: 5px;
    }
  }
}
</style>
